<template>
  <quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @ready="onEditorReady"
  >
  </quill-editor>
</template>

<script>
import hljs from 'highlight.js'
export default {
  props: {
    type: {
      type: String,
      required: true
    },
    quillContent: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      content: '', // 富文本默认内容
      // 富文本配置项
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'],
            ['image', 'link'] // 图片 链接
          ],
          syntax: {
            highlight: text => {
              return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方
            }
          }
        },
        editor: {
          delta: {
            ops: []
          }
        }
      }
    }
  },
  watch: {
    quillContent (newval) {
      this.content = newval
    }
  },
  methods: {
    // 点击修改跳转回来时回显
    onEditorReady () {
      this.content = this.quillContent
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>

<style lang='scss' scoped>
::v-deep .ql-editor {
  height: 200px;
}
</style>
